<template>
	<view class="server">
		<view class="server-top">
			<image :src="server_code" mode="widthFix" show-menu-by-longpress v-if="server_code"></image>
			<view style="color: #FFF;" v-else>未设置客服二维码，请拨打客服电话</view>
		</view>
		<view class="server-bot">
			<view class="server-bot-tips">扫一扫二维码，添加客服微信</view>
			<view class="server-bot-save" @click="saveImg">保存到相册</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				server_code: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-09-30/20200930/0ccd5bb38030697ec141e75f424a04b3.jpg',
				server_phone: ''
			};
		},
		methods: {
			saveImg(){
				if(!this.server_code){
					uni.showToast({
						icon: 'none',
						title: '未设置客服二维码'
					})
					return
				}
				uni.downloadFile({
					url: this.server_code,
					success: (downRes) => {
						uni.saveImageToPhotosAlbum({
							filePath: downRes.tempFilePath,
							success: (saveRes) => {
								uni.showToast({
									icon: 'none',
									title: '保存成功'
								})
							}
						})
					}
				})
			},
		},
		mounted() {
		
		}
	}
</script>

<style lang="scss">
	.server{
		width: 600rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.server-top{
			padding: 70rpx 0;
			background-color: #141414;
			position: relative;
			text-align: center;
			&::after{
				position: absolute;
				content: '';
				width: 0;
				height: 0;
				border-left: 20rpx solid transparent;
				border-right: 20rpx solid transparent;
				border-top: 20rpx solid #141414;
				bottom: -20rpx;
				left: 50%;
				transform: translateX(-50%);
			}
			image{
				width: 280rpx;
				height: 280rpx;
				border-radius: 8rpx;
			}
		}
		.server-bot{
			background-color: #FFF;
			text-align: center;
			padding: 50rpx;
			.server-bot-tips{
				color: #141414;
				font-size: 36rpx;
				font-weight: bold;
			}
			.server-bot-save{
				display: inline-block;
				width: 400rpx;
				height: 72rpx;
				line-height: 68rpx;
				border: 2rpx solid rgba(20,20,20,1);
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #141414;
				margin-top: 40rpx;
			}
		}
	}
</style>